<template>
    <div>
        <!-- 查询条件 -->
        <div class="query-container">
            <div class="query-title">查询条件</div>
            <div class="query-condition">
                <el-form ref="queryParams" :model="queryParams" size="mini" inline>
                    <el-row>
                        <el-form-item>
                            <el-input v-model="queryParams.name" placeholder="参数名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="queryParams.code" placeholder="参数编码"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleQuery">查询</el-button>
                            <el-button>重置</el-button>
                        </el-form-item>
                    </el-row>
                </el-form>
            </div>
        </div>
        <!-- 按钮工具栏 -->
        <div class="query-button-toolbar">
            <el-button type="primary" size="mini" @click="openAddAndEditDialog('add')">新 增</el-button>
        </div>

        <!-- 查询结果 -->
        <div class="query-container">
            <div class="query-title">查询结果</div>
            <div class="query-table">
                <el-table :data="tableData" :loading="loading" style="width: 100%" size="small" empty-text="空空如也"
                          stripe border>
                    <el-table-column type="index" label="序号" width="50"></el-table-column>
                    <el-table-column prop="code" label="参数编码" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="name" label="参数名称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="createTime" label="创建日期" show-overflow-tooltip></el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button @click="openAddAndEditDialog('edit', scope.row)" type="text" size="small">编辑
                            </el-button>
                            <el-button @click="handleDeleteFunc(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页条件 -->
                <pagination small
                            v-show="pageParams.pageCount > 0"
                            :total="pageParams.pageCount"
                            :page.sync="pageParams.pageNum"
                            :limit.sync="pageParams.pageSize"
                            :page-sizes="pageSizes"
                            @pagination="handleQuery"/>
            </div>
        </div>

        <!-- 新增/修改弹出框 -->
        <el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="30%"
                   :close-on-click-modal="closeOnClickModal">
            <el-form :model="createForm" :rules="createFormRules" ref="createForm" size="mini">
                <el-input v-model="createForm.id" v-show="false"></el-input>
                <el-form-item label="参数名称" label-width="80px" prop="name">
                    <el-input v-model="createForm.name" placeholder="请输入参数名称"></el-input>
                </el-form-item>
                <el-form-item label="参数编码" label-width="80px" prop="code">
                    <el-input v-model="createForm.code" placeholder="请输入参数编码"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleAddFunc" v-if="dialog.btnType" type="primary" size="mini">新 增</el-button>
                <el-button @click="handleEditFunc" v-else type="primary" size="mini">编 辑</el-button>
                <el-button @click="closeAddAndEditDialog" size="mini">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import {
    createDictType as insertApi,
    updateDictType as updateApi,
    queryPage as queryApi,
    removeDictType as removeApi
} from "@/api/sys/dictType";
import Pagination from "@/components/Pagination";

export default {
    name: "DictType",
    components: {Pagination},
    data() {
        return {
            insertApi,
            removeApi,
            updateApi,
            queryApi,
            pageParams: {
                pageCount: 0,
                pageNum: 1,
                pageSize: 2,
            },
            queryParams: {},
            createForm: {},
            tableData: [],
            loading: false,
            closeOnClickModal: false,
            dialog: {
                title: "新增",
                visible: false,
                btnType: true,
            },
            pageSizes: [2,4,8],
            createFormRules: {
                name: [
                    {required: true, message: "请输入参数名称", trigger: "blur"},
                    {min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur"},
                ],
                code: [
                    {required: true, message: "请输入参数编码", trigger: "blur"},
                    {min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur"},
                ]
            }
        };
    },
    created() {
        // 请求参数处理
        // 查询表格数据
        this.handleQuery();
    },
    methods: {
        /** 查询方法 */
        handleQuery() {
            this.getListTableData();
        },
        /** 查询表格数据 */
        getListTableData() {
            const _this = this;
            _this.queryParams.pageNum = _this.pageParams.pageNum;
            _this.queryParams.pageSize = _this.pageParams.pageSize;
            _this.loading = true;
            this.queryApi(_this.queryParams).then((resp) => {
                if (resp.code === 20000) {
                    _this.tableData = resp.data.record;
                    _this.pageParams.pageNum = resp.data.pageNum;
                    _this.pageParams.pageSize = resp.data.pageSize;
                    _this.pageParams.pageCount = resp.data.pageCount;
                } else {
                    _this.$message.warning(resp.message);
                }
                _this.loading = false;
            }).catch((error) => {
                _this.$message.warning(error.message);
                _this.loading = false;
            });
        },
        /** 新增/编辑弹出框 */
        openAddAndEditDialog(type, row) {
            const _this = this;
            if (type === 'add') {
                console.log('---->add')
                _this.dialog.title = '新增';
                _this.dialog.btnType = true;
                _this.dialog.visible = true;
                return;
            }
            Object.assign(_this.createForm, row);
            console.log('---->edit')
            _this.dialog.title = '编辑';
            _this.dialog.btnType = false;
            _this.dialog.visible = true;
        },
        /** 关闭弹出框 */
        closeAddAndEditDialog() {
            // 清空表单数据
            this.$refs.createForm.resetFields();
            this.dialog.visible = false;
        },
        /** 新增方法 */
        handleAddFunc() {
            const _this = this;
            _this.$refs.createForm.validate((valid) => {
                if (valid) {
                    this.insertApi(_this.createForm).then((resp) => {
                        if (resp.code === 20000) {
                            _this.$message.success(resp.message);
                            _this.closeAddAndEditDialog();
                            _this.handleQuery();
                        } else {
                            _this.$message.warning(resp.message);
                        }
                    }).catch((error) => {
                        _this.$message.warning(error.message);
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        /** 编辑方法 */
        handleEditFunc() {
            const _this = this;
            _this.$refs.createForm.validate((valid) => {
                if (valid) {
                    this.updateApi(_this.createForm).then((resp) => {
                        if (resp.code === 20000) {
                            _this.$message.success(resp.message);
                            _this.closeAddAndEditDialog();
                            _this.handleQuery();
                        } else {
                            _this.$message.warning(resp.message);
                        }
                    }).catch((error) => {
                        _this.$message.warning(error.message);
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        /** 删除方法 */
        handleDeleteFunc(row) {
            const _this = this;
            _this.$confirm("是否删除当前行数据?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                closeOnClickModal: false,
                type: "warning",
            }).then(() => {
                this.removeApi(row[this.mainKeyId]).then((resp) => {
                    if (resp.code === 20000) {
                        _this.$message.success(resp.message);
                        _this.handleQuery();
                    } else {
                        _this.$message.warning(resp.message);
                    }
                }).catch((error) => {
                    _this.$message.warning(error.message);
                });
            }).catch(() => {});
        }
    }
}
</script>

<style lang="scss" scoped>

</style>